前端面试题（移动适配，闭包，this，HTTP状态码，排序思路，页面加载，数组去重）

前端面试题（移动适配，闭包，this，HTTP状态吗，排序思路，页面加载，数组去重）

1 请写出一个符合 W3C 规范的 HTML 文件

请写出一个符合 W3C 规范的 HTML 文件，要求

页面标题为「我的页面」
页面中引入了一个外部 CSS 文件，文件路径为 /style.css
页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效
页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效
页面中引入了一个外部 JS 文件，路径为 /main.js
页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意
注意题目中的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的页面</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./print.css" media="print">
    <link rel="stylesheet" href="./mobile.css" media="(max-width: 500px)">
    <style>
        body{
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>
    <svg version="1.1" width="100px" height="100px" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="50" fill="red"/>
    </svg>
    <script src="./main.js"></script>
    <script src="./gbk.js" charset="GBK"></script>
</body>
</html>

2 移动端是怎么做适配的？

2016年腾讯前端面试题：
移动端是怎么做适配的？
回答要点：

meta viewport
媒体查询
动态 rem 方案

（可以参考我写的博客
CSS5:移动端页面(响应式)
CSS9:动态 REM-手机专用的自适应方案）
答：

2.1做手机端页面首先要加上一个meta标签

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

content="width=device-width表示宽度等于设备宽度,意思就是不要将页面宽度变成980px,用设备宽度.
user-scalable=no表示用户不以缩放
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0
初始缩放倍数,最大缩放倍数,最小缩放倍数,都是1.0,即不能缩放

2.2媒体查询

通过媒体查询，根据不同条件，使用不同的css样式。
例如：

    <style>
        @media (max-width: 800px){/*如果媒体满足0到800 之间,那么会应用这里面的样式*/
            body{
                background-color: red;
            }
        }
    </style>

2.3动态rem

因为手机需要兼容很多不同宽度的手机设备，所以将长度单位依赖于手机设备宽度，使用动态rem方案，那么就可以在不同手机上实现相同比例的页面缩放而不影响布局。
rem:root em,即<html>的font-size.
实现动态rem,主要需要下面两步：
1在<head>标签里加上如下代码,让10rem等于页面宽度

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <title>动态REM</title>
      <script>
        var pageWidth = window.innerWidth
         document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
      </script>
    </head>

2使用sass自动将设计稿的px转换为rem
在scss文件里写这样一个函数：

    @function px( $px ){
    @return $px/$designWidth*10 + rem;
    }

    $designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。设计师的设计稿宽度需要统一

就可以使用px()函数将像素转化为rem。

3 实现圆角矩形和阴影怎么做?

2017年腾讯前端实习面试题（二面）：
用过CSS3吗? 实现圆角矩形和阴影怎么做?
（搜索MDN border-radius）
答：
用过。例如阴影，圆角，动画，渐变和过渡
1.圆角:
简写属性border-radius。例如
border-radius: 30px;
border-radius: 50%;
半径参数可以是长度单位，也可以是百分比单位。

也可以分别设置四个角

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

半径参数可以是一个或两个，一个参数代表圆形圆角，两个参数是椭圆圆角

2.阴影：

语法：
box-shadow:inset x-offset y-offset blur-radius spread-radius color
五个参数分别是：投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色

4 什么是闭包，闭包的用途是什么？

出处同上（一面二面都问了）：
什么是闭包，闭包的用途是什么？
JavaScript高程P178
闭包的用途

答:

4.1什么是闭包

闭包是指有权访问另一个函数作用域中的变量的函数。
例如

function foo(){
  var local = 1
  function bar(){
    local++
    return local
  }
  return bar
}

var func = foo()
func()

bar函数可以访问变量local，bar就是一个闭包。

4.2闭包的用途

模仿块级作用域
```
function A(num) {
    //核心代码
   (funnction(){
    for(var i = 0; i<num; i++) {
      num++;
    }
    })()
    //核心代码结束
    console.log(i)//underfined
  }
```
匿名自执行函数在内部形成了一个闭包，使i变量只有块级作用域。闭包的本质是函数，其实在这里闭包就是那个匿名函数，这个闭包可以得到函数A内部的活动变量，又能保证自己内部的变量在自执行后直接销毁。
存储变量
闭包的另一个特点是可以保存外部函数的变量，原理是基于javascript中函数作用域链的特点，内部函数保留了对外部函数的活动变量的引用，所以变量不会被释放
```
function B(){
   var x = 100;
   return {
       function(){
           return x
       }
   }
 }
var m = B()//运行B函数，生成活动变量 x被m引用
```
运行B函数，生成活动变量 x被m引用， 变量x不会被销毁。
运行B函数，返回值就是B内部的匿名函数，此时m引用了变量x，所以B执行后x不会被释放，利用这一点，我们可以把比较重要或者计算耗费很大的值存在x中，只需要第一次计算赋值后，就可以通过m函数引用x的值，不必重复计算，同时也不容易被修改。

封装私有变量

function Person(){
   var name = 'default';
   this.getName:function(){
       return name;
   }
   this.setName:function(value){
       name = value;
   }
}
console.log(Person.getName())//default
console.log(Person.setName('mike'))
console.log(Person.getName())//mike

设置了两个闭包函数来操作Person函数内部的name变量,除了这两个函数，在外部无法再访问到name变量，name也就相当于是私有成员。

5 call、apply、bind 的用法分别是什么？

阮一峰的javascript教程--this
深入浅出妙用Javascript中apply、call、bind

答:

如果在函数中包含多层的this，this的指向是不确定的。需要把this固定下来，避免出现意想不到的情况。JavaScript提供了call、apply、bind这三个方法，来切换/固定this的指向。

5.1Function.prototype.call()

函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

call的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

5.2Function.prototype.apply()

apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数。

apply方法的第一个参数也是this所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象。第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。原函数的参数，在call方法中必须一个个添加，但是在apply方法中，必须以数组形式添加。

function f(x, y){
  console.log(x + y);
}

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

5.3Function.prototype.bind()

bind方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。

bind方法的参数就是所要绑定this的对象。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1

上面代码中，counter.inc方法被赋值给变量func。这时必须用bind方法将inc内部的this，绑定到counter，否则就会出错。

6 HTTP 状态码

出处同上：
请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。

例如：

状态码 200 表示响应成功。

答：

状态码 202 表示：服务器已接受请求，但尚未处理。
状态码 204 表示：请求处理成功，但没有资源可返回。
状态码 206 表示：服务器已经成功处理了部分 GET 请求。

状态码 301 表示：请求的资源已被永久的分配了新的 URI。
状态码 302 表示：请求的资源临时的分配了新的 URI。

状态码 400 表示：请求报文中存在语法错误。
状态码 401 表示：发送的请求需要有通过 HTTP 认证的认证信息。
状态码 403 表示：对请求资源的访问被服务器拒绝了。
状态码 404 表示：服务器上无法找到请求的资源。

状态码 500 表示：服务器端在执行请求时发生了错误。
状态码 503 表示：服务器暂时处于超负债或正在进行停机维护，现在无法处理请求。

7 写出一个 HTTP post 请求的内容

出处同上：
请写出一个 HTTP post 请求的内容，包括四部分。
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path

看我的博客HTTP入门（一）：在Bash中curl查看请求与响应

答：

1 POST /path HTTP/1.1
2 Host: www.baidu.com
2 User-Agent: curl/7.20.0 (x86_64-unknown-linux-gnu) libcurl/7.20.0 zlib/1.2.8
2 Accept: */*
2 Content-Length: 24
2 Content-Type: application/x-www-form-urlencoded
3 
4 username=ff&password=123

8 请说出至少三种排序的思路

这三种排序的时间复杂度分别为

O(n*n)
O(n log2 n)
O(n + max)

答：

O(n*n) 冒泡排序：遍历整个数组，依次比较相邻两个元素，将小的排在前面，大的排后面，这样一遍循环下来就可以将最大的元素排到最后，除去已经排过的最大的数，然后再次循环以上操作，直到最后一个为止。

O(n log2 n) 快速排序：以第一个元素为基准，比这个元素小的元素排在左边，比这个元素大的排右边，再以该元素左边和右边的第一个元素为基准，在子区间重复以上的操作，直到只有一个数字排序为止。

O(n + max) 基数排序：首先根据个位数的数值，将需要排序的一串数值分配到0-9的桶中。接着将这些桶中的数值重新串起来，形成新的数列。接着根据十位数、百位数直至最高位重复以上操作。

9 页面从输入URL到页面加载显示完成的过程

著名前端面试题：

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
这一题是在挖掘你的知识边界，所以你知道多少就要答多少。

可以先查阅一些资料再查，但是不要把自己不懂的东西放在答案里，面试官会追问的。

知乎上：从输入 URL 到页面加载完成的过程中都发生了什么
答：

DNS解析
DNS解析的过程就是浏览器查找域名对应的 IP 地址；
TCP连接
浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手：
（1）主机向服务器发送一个建立连接的请求（您好，我想认识您）；
（2）服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
（3）主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。
发送HTTP请求
浏览器根据 URL 内容生成 HTTP 请求报文。HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文，其中包含请求文件的位置、请求文件的方式等等。
服务器处理请求并返回HTTP报文
服务器接到请求后，回想客户端发送HTTP响应报文。HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。服务器会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件，并将得到的 HTML 文件发送给浏览器。
浏览器解析渲染页面
浏览器是一个边解析边渲染的过程。在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页。在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。
关闭TCP连接或继续保持连接
（1）主机向服务器发送一个断开连接的请求（不早了，我该走了）；

（2）服务器接到请求后发送确认收到请求的信号（知道了）；

（3）服务器向主机发送断开通知（我也该走了）；

（4）主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接；

10 如何实现数组去重

著名面试题：
如何实现数组去重？
假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。

要求：

不要做多重循环，只能遍历一次
请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）
从 JavaScript 数组去重谈性能优化
 也谈JavaScript数组去重
答：

ES5：
思路：核心是构建了一个 hash 对象来替代 indexOf. 注意在 JavaScript 里，对象的键值只能是字符串，因此需要 var key = typeof(item) + item 来区分数值 1 和字符串 '1' 等情况。
只循环一遍

function unique(arr) {
  var ret = []
  var hash = {}
  for (var i = 0; i < arr.length; i++) {
    var item = arr[i]
    var key = typeof(item) + item
    if (hash[key] !== 1) {
      ret.push(item)
      hash[key] = 1
    }
  }
  return ret
}

ES6：ES2015引入了一种叫作Set的数据类型。顾名思义，Set就是集合的意思，它不允许重复元素出现。
如果重复添加同一个元素的话，Set中只会存在一个。包括NaN也是这样

function unique(array) {
   return Array.from(new Set(array));
}